<template>
  <div>
    <div v-if="!fileNames"  class="delete-massage">确定要删除此知识元吗 </div>
    <div v-else class="delete-knowledge">
      <p class="delete-massage">确定要删除此知识元吗</p>
      <p class="delete-question">以下是当前知识元批量上传的题目，删除知识元前请删除题目</p>
      <div v-for="(item, index) in fileNames" :key="item">{{ index + 1}}、{{ item }} <el-button type="text" @click="deleteQuestion(index)">删除</el-button></div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch } from 'vue'
import $ from '$'
import { ElMessage } from 'element-plus'
export default {
  props: {
    deleteData: {
      type: Object,
      default: () => ({})
    }
  },
  setup (props) {
    let fileNames = ref()
    watch(props.deleteData, (e) => {
      console.log(e)
    }, { immediate: true, deep: true })
    if (props.deleteData.fileNames) {
      fileNames.value = props.deleteData.fileNames.split('##')
    } else {
      fileNames.value = null
    }
    const save = (resolve, reject) => {
      resolve()
    }
    const deleteQuestion = (index) => {
      let importLogIds = props.deleteData.importLogIds.split('##')
      $.http.post('/admin/knowledgeManager/deleteAllById', { importLogIds: importLogIds[index], id: props.deleteData.id }).then((res) => {
        if(res.result) { 
          ElMessage.success('已删除~！')
          fileNames.value.splice(index, 1)
          $.emitter.emit('knowledge-init')
        }else {
          ElMessage.error(res.msg);
        }
      })
    }
    return { save, fileNames, deleteQuestion }
  }
}
</script>

<style lang="scss" scoped>
  .delete-knowledge {
    div{
      color: $--color-primary;
      text-decoration: none;
      display: flex;
      button {
        margin-left: auto;
        color: $--color-danger;
      }
    }
    .delete-massage {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
  }
</style>